<!DOCTYPE html>
<html>
    <head>
        <title>Testing cfi.coffee</title>
        <meta charset="UTF-8"/>
        <script type="text/javascript" src="cfi-test.js"></script>
        <script type="text/javascript" src="cfi.coffee"></script>
        <script type="text/javascript" src="cfi-test.coffee"></script>
        <style type="text/css">
            body { 
                font-family: sans-serif;
                background-color: white;
                padding-bottom: 500px;
            }
            
            h1, h2 { color: #005a9c }

            h2 {
                border-top: solid 2px #005a9c;
                margin-top: 4ex;
            }

            #container {
                max-width: 30em;
                margin-right: auto;
                margin-left: 2em;
                position:relative;
            }

            #overflow {
                max-height: 100px;
                overflow: scroll;
                border: solid 1px black;
                padding: 2em;
            }

            #whitespace {
                border: 20px solid gray;
                margin: 20px;
                padding: 20px;
            }

            #reset {
                color: blue;
                text-decoration: none
            }
            #reset:hover { color: red }
        </style>
    </head>
    <body>
        <div id="container">
            <h1 id="first-h1">Testing cfi.coffee</h1>
            <p>Click anywhere and the location will be marked with a marker, whose position is set via a CFI.</p>
            <p>
                <a id="reset" href="/">Reset CFI to None</a>
                &nbsp;
                Test viewport location calculation:
                <input type="checkbox" id="viewport_mode" title=
                "Checking this will cause the window to scroll to a position based on a CFI calculated for the windows current position."/>
            </p>
            <h2>A div with scrollbars</h2>
            <p>Scroll down and click on some elements. Make sure to hit both
            bold and not bold text as well as different points on the image</p>
            <div id="overflow">But I must explain to you how all this mistaken
                idea of denouncing pleasure and praising pain was born and I
                will give you a complete account of the system, and expound the
                actual teachings of the great explorer of the truth, the
                master-builder of human happiness. No one rejects, dislikes, or
                avoids pleasure itself, because it is pleasure, but because
                those who do not know how to pursue pleasure rationally
                encounter consequences that are extremely painful. Nor again is
                there anyone who <b>loves or pursues or desires</b> to obtain
                pain of itself, because it is pain, but because occasionally
                circumstances occur in which toil and pain can procure him some
                great pleasure. To take a trivial example, which of us ever
                undertakes laborious physical exercise, except to obtain some
                advantage from it? But who has any right to find fault with a
                man who chooses to enjoy a pleasure that has no annoying
                consequences, or one who avoids a pain that produces no
                resultant pleasure? On the other hand, we denounce with
                righteous indignation and dislike men who are so beguiled and
                demoralized by the charms of pleasure of the moment, so blinded
                by desire, that they cannot foresee
                <img src="marker.png" width="150" height="200" alt="Test Image"
                style="border: solid 1px black; display:block"/>

            </div>
            <h2>Some entities and comments</h2>
            <p>Entities: &amp; &copy; &sect; &gt; some text after entities</p>
            <p>An invisible Comment: <!-- aaaaaa --> followed by some text</p>
            <p>An invalid (in HTML) CDATA: <![CDATA[CDATA]]> followed by some text</p>
            <h2>Margins padding borders</h2>
            <p>Try clicking in the margins, borders and padding. CFI
            calculation should fail.</p>

            <p id="whitespace">But I must explain to you how all this mistaken
            idea of denouncing pleasure and praising pain was born and I will
            give you a complete account of the system, and expound the actual
            teachings of the great explorer of the truth, the master-builder of
            human happiness. No one rejects, dislikes, or avoids pleasure
            itself, because it is pleasure, but because those who do not know
            how to pursue pleasure rationally encounter consequences that are
            extremely painful. Nor again is there anyone who <b>loves or
                pursues or desires</b> to obtain pain of itself, because it is
            pain, but because occasionally circumstances occur in which toil
            and pain can procure him some great pleasure. To take a trivial
            example, which of us ever undertakes laborious physical exercise,
            except to obtain some advantage from it? But who has any right to
            find fault with a man who chooses to enjoy a pleasure that has no
            annoying consequences, or one who avoids a pain that produces no
            resultant pleasure? On the other hand, we denounce with righteous
            indignation and dislike men who are so beguiled and demoralized by
            the charms of pleasure of the moment, so blinded by desire, that
            they cannot foresee</p>

            <h2>Lots of collapsed whitespace</h2>
            <p>Try clicking the A character after the colon:             
            A suffix</p>

            <h2>Lots of nested/sibling tags</h2>
            <p>A <span>bunch of <span>nested<span> and</span> <span>sibling</span>
                tags, all </span> mixed together</span>. <span>Click all</span>
                over this paragraph to test<span> things.</span></p>

            <h2>Images</h2>
            <p>Try clicking at different points along the image. Also try
            changing the magnification and then hitting reload.</p>
            <img src="marker.png" width="150" height="200" alt="Test Image"
            style="border: solid 1px black"/>

            <h2>Iframes</h2>
            <p>Try clicking anywhere in the iframe below:</p>
            <iframe src="iframe.html"></iframe>

            <h2>Video</h2>
            <p>Try clicking on this video while it is playing. The page should
            reload with the video paused at the point it was at when you
            clicked.  To play the video you should right click on it and select
            play (otherwise the click will cause a reload). 
            </p>
            <video width="320" height="240" controls="controls" preload="auto"
            src="birds.webm" type="video/webm"></video>

        </div>
        <img id="marker" style="position: absolute; display:none; z-index:10"
        src="marker.png" alt="Marker" />
    </body>
</html>


